<template>
  <div class="wrap-table">
    <el-form ref="form" :model="searchData" label-width="100px" class="clearfix">
      <el-form-item
        label="所在地区"
        label-width="70px"
        class="pull-left item-right"
        style="width:200px"
      >
        <el-select
          v-model="searchData.districtNo"
          placeholder="请选择"
          @change="changeDis"
          clearable
        >
          <el-option
            v-for="item in optionDiq1"
            :key="item.DistrictName"
            :label="item.DistrictName"
            :value="item.DistrictNo"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在社区" class="pull-left item-right" style="width:200px">
        <el-select v-model="CtyIds" placeholder="请选择" @change="Commutysp" clearable>
          <el-option
            v-for="item in optionsData1"
            :key="item.SYS_ID"
            :label="item.CName"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="访谈人员类型"
        label-width="120px"
        class="pull-left item-right"
        style="width:300px"
      >
        <el-select v-model="searchData.roleGroup" clearable placeholder="请选择">
          <el-option value label="全部"></el-option>
          <el-option value="3" label="健康访谈人员"></el-option>
          <el-option value="7" label="社区HCP（干预组）"></el-option>
          <el-option value="8" label="社区HCP（对照组）"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="pull-left" label>
        <el-input
          v-model="searchData.nurse"
          style="width: 210px;margin-left: -60px;"
          placeholder="姓名"
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="checkList" class="pull-right mg-lr-20 pd-bt">查询</el-button>
    </el-form>
    <!---->
    <template>
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        element-loading-text="加载中"
        style="width: 100%"
      >
        <el-table-column prop="Surname" label="姓名" align="center" min-width="120"></el-table-column>
        <el-table-column
          prop="DistrictName"
          label="所在地区"
          :show-overflow-tooltip="true"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="CName" label="所在社区" align="center" min-width="120"></el-table-column>
        <el-table-column prop="RoleGroup" :formatter="RoleGroup" label="访谈人员类型" align="center" min-width="120"></el-table-column>
        <el-table-column prop="PreTestDate" label="在预试验开始健康访谈的日期" align="center" min-width="120"></el-table-column>
        <el-table-column
          prop="FormalTestDate"
          label="在正式试验开始健康访谈的日期"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column prop="LastDate" label="最后一次提供健康访谈的日期" align="center" min-width="120"></el-table-column>
        <el-table-column prop="FollowupCompleteCount" label="健康访谈完成次数" align="center" min-width="120"></el-table-column>
        <el-table-column prop="PointCount" label="质控时间点个数" align="center" min-width="120"></el-table-column>
        <el-table-column prop="QCCompleteCount" label="质控完成次数" align="center" min-width="120"></el-table-column>
        <el-table-column min-width="80" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="handleTable(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--分页-->
    <div class="block mg-20-auto pagination-fixed">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageId"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {DIC_PERIODA,filterPeriod} from '@/utils/localDic'
export default {
  data() {
    return {
      searchData: {
        nurse: "",
        districtNo: "",
        communityId: "",
        roleGroup:""
      },
      optionDiq1: [],
      optionsData1: [], //社区数据
      timeDate: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pageId: 1,
      total: null,
      loading: true,
      pageSize: 10,
      tableData: [],
      maxHeight: "",
      CtyIds: "",
      CtyIdsTo: "",
      dataObj:{},
      optionsData2: [],
      RoleGroup(row, column, cellValue, index) {
        return cellValue == 7
          ? "社区HCP干预组"
          : cellValue == 8
          ? "社区HCP对照组"
          : cellValue == 3
          ? "健康访谈人员"
          : "-";
      }
    };
  },
  async mounted() {
    let that = this;
    let now = new Date();
    let nowTime = now.getTime();
    let day = now.getDay();
    if (day == 0) {
      //西方从周日算为第一天    2018/10/28
      day = 7;
    }
    let oneDayLong = 24 * 60 * 60 * 1000;
    let MondayTime = nowTime - (day - 1) * oneDayLong;
    let SundayTime = nowTime + (7 - day) * oneDayLong;
    let monday = dateForm(new Date(MondayTime));
    let sunday = dateForm(new Date(SundayTime));
    that.timeDate = [
      //初始化时间范围
      monday,
      sunday,
    ];
    await this.GetCommunityDistrict();
    that.getList();
  },
  beforeMount() {
    let that = this;
    let appHeight = $(window).height();
    let autoheight = appHeight - 250 + "px";
    that.maxHeight = autoheight;
  },
  methods: {
    
    handleTable(row){
      console.log(this.$parent.$parent.$parent)
      this.$parent.$parent.$parent.activeName ='2'
      this.$parent.$parent.$parent.data =row.SYS_ID
    },
    async GetCommunityDistrict() {
      //获取社区行政区
      let that = this;
      await that
        .service({
          url: "/Dic/GetCommunityDistrict",
          method: "get",
          params: {},
        })
        .then((response) => {
          that.optionDiq1 = response.dtData;
        })
        .catch((data) => {});
    },
    // 获取社区列表
    async getComselectList() {
      let that = this;
      await that
        .service({
          url: "dic/GetCommunity",
          method: "get",
          params: {
            cName: "",
            cGroup: "",
            districtNo: that.searchData.districtNo || "",
            pageCount: 0,
            pageSize: 100,
          },
        })
        .then((resp) => {
          if (
            that.searchData.districtNo &&
            that.searchData.districtNo != ""
          ) {
            that.optionsData1 = resp.dtData;
          } else {
            that.optionsData1 = [];
          }
        })
        .catch((data) => {});
    },
    // 获取社区列表
    async getComselectList1() {
      let that = this;
      await that
        .service({
          url: "dic/GetCommunity",
          method: "get",
          params: {
            cName: "",
            cGroup: "",
            districtNo: that.searchData.toDistrictNo || "",
            pageCount: 0,
            pageSize: 100,
          },
        })
        .then((resp) => {
          if (
            that.searchData.toDistrictNo &&
            that.searchData.toDistrictNo != ""
          ) {
            that.optionsData2 = resp.dtData;
          } else {
            that.optionsData2 = [];
          }
        })
        .catch((data) => {});
    },
    Commutysp(val) {
      this.CtyIds = val.CName;
      val.SYS_ID !== undefined
        ? (this.searchData.communityId = val.SYS_ID)
        : (this.searchData.communityId = "");
    },
    changeDis(val) {
      this.CtyIds = "";
      this.searchData.communityId = "";
      this.optionsData1 = [];
      if (val) {
        this.getComselectList();
      }
    },
    checkList: function () {
      //查询
      this.pageId = 1;
      this.pageSize = 10;
      this.total = null;
      this.getList();
    },
    handleSizeChange(val) {
      //条数改变
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageId = val;
      this.getList();
    },
    getList: function () {
      //获取一级信息列表
      let that = this;
      that.loading = true;
      that
        .service({
          url: "/QC/GetQCLog",
          method: "get",
          params: {
            pageCount: that.pageId - 1,
            pageSize: that.pageSize,
            startDate: that.timeDate ? that.timeDate[0] : "",
            endDate: that.timeDate ? that.timeDate[1] : "",
            ...that.searchData,
          },
        })
        .then((response) => {
          console.log(response);
          that.tableData = response.dtData;
          that.total = parseInt(response.dtData[0].TotalCount);
          that.loading = false;
        })
        .catch((data) => {
          that.loading = false;
        });
    },
  },
};
function addZero(s) {
  return s < 10 ? "0" + s : s;
}
function dateForm(data) {
  return (
    new Date(data).getFullYear() +
    "-" +
    addZero(new Date(data).getMonth() + 1) +
    "-" +
    addZero(new Date(data).getDate())
  );
}
</script>
<style scoped lang="scss">
.click_line {
  cursor: pointer;
  color: #409eff;
}
.pagination-fixed {
  position: static;
}
</style>
